<template>
    <div id="repo-detail" v-loading="isLoading">
        <div class="repo-detail-top">
            <div class="repo-detail-title" v-if="repoInfo">
                <i v-if="repoInfo.recommend" class="iconfont repo-verify icon-icon_certification_f"
                    title="Gitee推荐项目"></i>
                <router-link :to="'/'+repoInfo.namespace.path">{{repoInfo.namespace.name}}</router-link><span
                    class="repo-detail-path">/</span>
                <router-link :to="'/'+repoInfo.full_name">{{repoInfo.name}}</router-link>
                <div class="repo-detail-tags">
                    <el-tag size="small" type="success" effect="light" v-if="repoInfo.public">Open Source</el-tag>
                    <el-tag size="small" type="info" effect="plain" v-if="repoInfo.language">{{repoInfo.language}}
                    </el-tag>
                    <el-tag size="small" type="info" effect="plain" v-if="repoInfo.license">{{repoInfo.license}}
                    </el-tag>
                </div>
            </div>
            <div class="repo-detail-branch">
                <el-dropdown>
                    <span class="el-dropdown-link">
                        {{branchStr}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="item in branchList">{{item.name}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <!-- <div class="repo-detail-desc">{{repoInfo.description}}</div> -->

        <div class="repo-detail-body" v-if="repoInfo">
            <div class="repo-detail-menu">
                <router-link :to="'/'+repoInfo.full_name" class="repo-detail-menu-item">
                    <span class="repo-item-key"><i class="iconfont icon-MIS_bangongbiji"></i>README</span>
                    <span class="repo-item-value"></span>
                </router-link>
                <router-link :to="'/'+repoInfo.full_name+'/commit'" class="repo-detail-menu-item">
                    <span class="repo-item-key"><i class="iconfont icon-MIS_shouyedaohang"></i>Commits</span>
                    <span class="repo-item-value"></span>
                </router-link>
                <router-link :to="'/'+repoInfo.full_name+'/star'" class="repo-detail-menu-item">
                    <el-badge :value="repoInfo.stargazers_count" type="success" :hidden="repoInfo.stargazers_count==0">
                        <i class="iconfont icon-USB-fill"></i>Stars
                    </el-badge>
                </router-link>
                <router-link :to="'/'+repoInfo.full_name+'/fork'" class="repo-detail-menu-item">
                    <el-badge :value="repoInfo.forks_count" type="success" :hidden="repoInfo.forks_count==0">
                        <i class="iconfont icon-USB-fill"></i>Forks
                    </el-badge>
                </router-link>
                <router-link :to="'/'+repoInfo.full_name+'/watch'" class="repo-detail-menu-item">
                    <el-badge :value="repoInfo.watchers_count" type="success" :hidden="repoInfo.watchers_count==0">
                        <i class="iconfont icon-USB-fill"></i>Watches
                    </el-badge>
                </router-link>
                <router-link :to="'/'+repoInfo.full_name+'/issue'" class="repo-detail-menu-item">
                    <el-badge :value="repoInfo.open_issues_count" :hidden="repoInfo.open_issues_count==0">
                        <i class="iconfont icon-USB-fill"></i>Issues
                    </el-badge>
                </router-link>
                <router-link :to="'/'+repoInfo.full_name+'/ide'" class="repo-detail-menu-item">
                    <span class="repo-item-key"><i class="iconfont icon-vscode"></i>Web IDE</span>
                </router-link>
                <router-link :to="'/'+repoInfo.full_name+'/setting'" class="repo-detail-menu-item">
                    <span class="repo-item-key"><i class="iconfont icon-changyongtubiao-mianxing-29"></i>Settings</span>
                </router-link>
            </div>
            <div class="repo-detail-main">
                <router-view></router-view>
            </div>
        </div>

    </div>
</template>
<script>
    import request from "@/lib/request";
    import helper from "@/lib/helper";
    export
        default {
            data() {
                return {
                    isLoading: false,
                    repoInfo: false,
                    repoUrl: "",
                    branchStr: "master",
                    branchList: []
                };
            },
            created() {
                let res = location.pathname.split("/");
                console.log(res);
                if (res.length < 3) {
                    this.$router.push('/');
                    return;
                }
                this.repoUrl = res[1] + "/" + res[2];
                this.getRepoInfo();
            },
            watch: {
                router(from, to) {
                    console.log(to);
                }
            },
            methods: {
                getBranchList() {
                    let that = this;
                    request({
                        url: 'repos/' + that.repoUrl + "/branches",
                        success(res) {
                            that.branchList = res;
                        }
                    })
                },
                getRepoInfo() {
                    let that = this;
                    that.isLoading = true;
                    request({
                        url: 'repos/' + that.repoUrl,
                        success(res) {
                            that.repoInfo = res;
                            that.branchStr = res.default_branch;
                            that.getBranchList();
                        },
                        final() {
                            that.isLoading = false;
                        }
                    });
                }
            }
        }
</script>
<style>
    #repo-detail {
        flex-direction: column;
    }

    #repo-detail .repo-detail-path {
        margin: 0px 5px;
    }

    #repo-detail .el-dropdown {
        font-size: 16px;
        cursor: pointer;
    }

    #repo-detail .repo-detail-title a {
        color: #333;
        font-weight: bold;
        font-size: 20px;
    }

    #repo-detail .repo-detail-title {
        flex-direction: row;
        font-size: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-grow: 1;
    }

    #repo-detail .repo-detail-title .repo-verify {
        color: #187cd5;
        margin-right: 5px;
        font-size: 18px;
        vertical-align: top;
    }

    #repo-detail .repo-detail-top {
        padding: 20px;
        display: flex;
        flex-direction: row;
    }

    #repo-detail .repo-detail-main {
        overflow: hidden;
        overflow-y: auto;
        position: relative;
        flex-grow: 1;
        display: flex;
    }

    .el-loading-parent--relative {
        position: relative !important;
        overflow-x: clip !important;
        overflow-y: clip !important;
    }

    .repo-detail-body {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        flex-grow: 1;
        border-top: 5px solid var(--bg-color);
    }

    .repo-detail-menu {
        display: flex;
        flex-direction: row;
        border-bottom: 1px dashed #ddd;
    }

    .repo-detail-menu .el-badge__content {
        right: 0;
    }

    .repo-detail-menu-item:last-child {
        border-bottom: none;
    }

    .repo-detail-menu-item {
        display: flex;
        flex-direction: row;
        width: 12.5%;
        cursor: pointer;
        padding: 20px 0px;
        align-items: center;
        justify-content: center;
    }

    .repo-detail-menu-item:hover {
        background-color: #f8f8f8;
    }


    .repo-detail-tags {
        vertical-align: middle;
        margin-left: 10px;
        flex-grow: 1;
    }

    .repo-detail-tags span {
        margin: 0;
    }

    .repo-detail-branch {
        vertical-align: middle;
        font-size: 14px;
    }
</style>